<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>domdiff</title>
    <style>
        .oldBg{
            background-color: green;
        }
        .newBg{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <br/><button id="differentType">1.标签的类型不同</button>
    <br/><button id="differentText">2.文本内容不同</button>
    <br/><button id="differentAttributes">3.类型相同，属性不同</button>
    <br/><button id="existOldChildren">4.有老儿子，但没有新儿子</button>
    <br/><button id="existNewChildren">5.没有老儿子，有新儿子</button>
    <br/><button id="directCompare">6.直接对比，不考虑复用</button>
    <br/><button id="reuseOldDOM">7.考虑复用</button>
    <br/><button id="push">8.push</button>
    <br/><button id="unshift">9.unshift</button>
    <br/><button id="pop">10.pop</button>
    <br/><button id="shift">11.shift</button>
    <br/><button id="head2tail">12.head2tail</button>
    <br/><button id="tail2head">13.tail2head</button>
    <br/><button id="random">14.random</button>
    <br/><button id="key">15.key</button>
    <script src="main.js"></script>
</body>
</html>